<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="追溯码" prop="barCode" :rules="[{ required: true, message: '请输入追溯码', trigger: 'blur' }]">
        <el-input
          v-model="queryForm.barCode"
          placeholder="请输入追溯码"
          clearable
          style="width: 300px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery" :loading="loading" v-hasPermi="['wareHouse:barRelation:query']">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 提示信息 -->
    <div v-if="!loading && !searched" class="welcome-info">
      <el-alert
        title="欢迎使用关联关系查询"
        description="请在上方输入追溯码进行查询，系统将调用外部接口获取关联关系数据并保存到数据库中，查询成功后将自动跳转到详情页面查看追溯码信息。"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
    </div>
  </div>
</template>

<script>
import {queryBarRelationAndSave } from "@/api/wareHouse/barRelation";

export default {
  name: "BarRelation",
  data() {
    return {
      // 加载状态
      loading: false,
      // 是否已经搜索过
      searched: false,
      // 查询表单
      queryForm: {
        barCode: '',
        entId: '',
        refEntId: ''
      }
    };
  },
  created() {
    // 不在页面加载时自动获取列表，只有在查询后才显示数据
  },
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.searched = false;

          queryBarRelationAndSave(this.queryForm).then(response => {
            this.loading = false;
            this.searched = true;

            if (response.code === 200) {
              const result = response.data;
              if (result && result.success && result.billsID) {
                // 检查是否是已存在的数据
                if (result.isExisting) {
                  // 数据已存在，显示提示并提供选择
                  const existingBillsText = result.existingBillsIDs && result.existingBillsIDs.length > 0
                    ? `相关单据: ${result.existingBillsIDs.join(', ')}`
                    : '';

                  this.$confirm(
                    `${result.message}\n${existingBillsText}\n\n是否查看已有数据详情？`,
                    '数据已存在',
                    {
                      confirmButtonText: '查看详情',
                      cancelButtonText: '取消',
                      type: 'info'
                    }
                  ).then(() => {
                    // 跳转到详情页面
                    this.$router.push({
                      path: '/wareHouse/barRelation-detail/index',
                      query: { billsID: result.billsID }
                    });
                  }).catch(() => {
                    // 用户取消，重置状态
                    this.searched = false;
                  });
                } else {
                  // 新查询的数据，直接跳转
                  this.$modal.msgSuccess(result.message || "查询成功，正在跳转到详情页面...");
                  setTimeout(() => {
                    this.$router.push({
                      path: '/wareHouse/barRelation-detail/index',
                      query: { billsID: result.billsID }
                    });
                  }, 1000);
                }
              } else {
                this.$modal.msgInfo("未查询到相关数据");
                this.searched = false;
              }
            } else {
              this.$modal.msgError(response.msg || "查询失败");
              this.searched = false;
            }
          }).catch(error => {
            this.loading = false;
            this.searched = false;
            this.$modal.msgError("查询异常：" + (error.msg || "网络错误"));
          });
        }
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryForm = {
        barCode: '',
        entId: '',
        refEntId: ''
      };
      this.searched = false;
      this.$refs.queryForm && this.$refs.queryForm.resetFields();
    }



  }
};
</script>

<style scoped>
.welcome-info {
  margin-top: 40px;
}

/* 查询表单样式优化 */
::v-deep .el-form--inline .el-form-item {
  margin-bottom: 10px;
}
</style>
